<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>

<head>
    <%@ include file="/include/head.jsp"%>
    <title>确认订单</title>
    <link rel="stylesheet" href="${rootPath}/static/plugins/swiper/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="${rootPath}/static/css/webwiew.css">
    <script src="${rootPath}/static/plugins/swiper/swiper-3.4.2.jquery.min.js"></script>
    <script src="${rootPath}/static/js/mui.view.js" type="text/javascript"></script>
    <script src="${rootPath}/static/js/addressChoose.js" type="text/javascript"></script>
    <script src="${rootPath}/static/js/orderCheck.js" type="text/javascript"></script>


    <script>
        mui.init();
        //页面基础配置
        $(function(){
            //初始化页面vue对象
            initVueObj({
                vueTarget1:"#mainPage",
                vueTarget2:"#account"
            });
            //购物车页面不存在分页处理,所以需要单独初始化区域滚动
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0005
            });
            //初始化单页view
            var viewApi = mui('#app').view({
                defaultPage: '#mainPage'
            });
            // 初始化单页view相关事件处理
            var view = viewApi.view;
            (function($,$$) {
                //处理view的后退与webview后退
                var oldBack = $.back;
                $.back = function() {
                    if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
                        viewApi.back();
                    } else { //执行webview后退
                        oldBack();
                    }
                };
                //监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
                //第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
                view.addEventListener('pageBeforeShow', function(e) {
                    //				console.log(e.detail.page.id + ' beforeShow');
                });
                view.addEventListener('pageShow', function(e) {
                    if(e.detail.page.id  == "account" && $$(e.detail.page).attr("isShow")==undefined){
                        $$(e.detail.page).attr("isShow","true");
                        //初始化地址选择滑动和点击事件
                        addressChooseInit({
                            target:".swiper-container"
                        });
                    };

                    //				console.log(e.detail.page.id + ' show');
                });
                view.addEventListener('pageBeforeBack', function(e) {
                    //				console.log(e.detail.page.id + ' beforeBack');
                });
                view.addEventListener('pageBack', function(e) {
                    //				console.log(e.detail.page.id + ' back');
                });
            })(mui,$);
        });


    </script>
</head>

<body  class="mui-fullscreen">
    <!--页面主结构开始-->
    <div id="app" class="mui-views">
        <div class="mui-view">
            <div class="mui-navbar">
            </div>
            <div class="mui-pages">
            </div>
        </div>
    </div>
    <!--页面主结构结束-->
    <!--单页面开始-->
    <div id="mainPage" class="mui-page">
        <!--页面标题栏开始-->
        <div class="mui-navbar-inner mui-bar mui-bar-nav qy-bg-white">
            <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left qy-text-black">
                <span class="mui-icon mui-icon-left-nav"></span>
            </button>
            <h1 class="mui-center mui-title">确认订单</h1>
        </div>
        <!--页面标题栏结束-->
        <!--页面主内容区开始-->
        <div class="mui-page-content">
            <div class="footerMessage qy-flex qy-flex-fullHeight qy-bg-white qy-border-top mui-row qy-font-size-14px">
                <div class="mui-col-xs-2 qy-flex qy-flex-text-center">
                   <small>共</small>
                   <small class="qy-text-red">{{totalOrderCount}}</small>
                   <small>件</small>
                </div>
                <div class="qy-flex mui-col-xs-7 qy-flex-text-right qy-padding-right-8px">
                    <div>
                        <small>合计:</small>
                        <small class="qy-text-red">¥</small>
                        <span class="qy-text-red">{{totalPrice}}</span>
                    </div>
                </div>
                <div class="qy-flex mui-col-xs-3 qy-flex-text-center qy-padding-vertical-8px qy-bg-blue qy-text-white">
                   提交订单
                </div>
            </div>
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <a href="#account" class="qy-flex mui-block qy-flex-fullHeight qy-bg-white qy-margin-top-8px qy-text-black" v-for="ele in addressList" v-if="ele.isSelect">
                        <div class="mui-col-xs-1 qy-flex qy-flex-text-center">
                            <span class="mui-icon mui-icon-location qy-text-label"></span>
                        </div>
                        <div class="mui-col-xs-10 qy-padding-horizontal-8px">
                            <span class="qy-font-size-18px mui-block">{{ele.name}}  {{ele.phone}}</span>
                            <small class="qy-text-label">
                                {{ele.address}}
                            </small>
                        </div>
                        <div class="mui-col-xs-1 qy-flex qy-flex-text-center">
                            <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                        </div>
                    </a>
                    <a href="#account" class="qy-flex mui-block qy-flex-fullHeight qy-bg-white qy-margin-top-8px qy-text-black" v-if="addressList.length == 0">
                        <div class="mui-col-xs-11 qy-padding-horizontal-8px qy-flex qy-text-label qy-font-size-14px qy-padding-left-8px">
                            您当前并没有添加收货地址,请前往添加
                        </div>
                        <div class="mui-col-xs-1 qy-flex qy-flex-text-center">
                            <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                        </div>
                    </a>

                    <div class="qy-margin-top-8px qy-bg-white qy-padding-left-8px" v-for="hospital in orders">
                        <small class="qy-text-label mui-block">{{hospital.hospitalName}}</small>

                        <div class="qy-flex qy-border-bottom qy-padding-horizontal-8px qy-flex-fullHeight" v-for="product in hospital.products" v-if="product.productType == 0">
                            <div class="mui-col-xs-3 qy-flex">
                                <img style="max-height: 70px; max-width: 70px;" :src="product.productImg" alt="">
                            </div>
                            <div class="mui-col-xs-7">
                                <span class="mui-block qy-text-black qy-font-size-18px">{{product.productName}}</span>
                                <small class="qy-text-label mui-block">面额: {{product.oldPrice}}</small>
                                <div class="qy-text-red">
                                    <small>¥</small>
                                    <span>{{product.salesPrice}}</span>
                                </div>
                            </div>
                            <div class="mui-col-xs-2 qy-flex qy-flex-text-center">
                                <small class="qy-text-label">x{{product.count}}</small>
                            </div>
                        </div>
                        <div v-else><%--体检套餐循环--%>
                            <div class="qy-flex qy-border-bottom qy-padding-horizontal-8px qy-flex-fullHeight">
                                <div class="mui-col-xs-3 qy-flex">
                                    <img style="max-height: 70px; max-width: 70px;" :src="product.productImg" alt="">
                                </div>
                                <div class="mui-col-xs-6">
                                    <span class="mui-block qy-text-black qy-font-size-18px">{{product.productName}}</span>
                                    <div>
                                        <small class="qy-text-red">¥</small>
                                        <span class="qy-text-red">{{product.salesPrice}}</span>
                                        <del class="qy-text-label qy-font-size-12px">
                                            ¥{{product.oldPrice}}
                                        </del>
                                    </div>
                                    <small class="mui-block qy-text-label">请提前两天预约</small>
                                </div>
                                <div class="mui-col-xs-3 qy-flex qy-flex-text-center qy-flex-text-bottom">
                                    <small class="qy-text-label qy-flex qy-icon-downArrowSolid">预约时间</small>
                                </div>
                            </div>
                            <div class="qy-flex qy-flex-text-between qy-border-bottom qy-padding-horizontal-8px switchBoxClickArea" v-on:click="makeAppoint(product)">
                                <div>
                                    <div><span>现在预约</span><small class="qy-text-label">(预约付款后不可退款)</small></div>
                                    <small class="qy-text-label">可在购买后通过待预约订单预约</small>
                                </div>
                                <div class="qy-padding-right-8px switchBoxClickAreaSpecial">
                                    <span></span>
                                    <div class="mui-switch mui-switch-blue mui-switch-mini mySwitchBtn" >
                                        <div class="mui-switch-handle" ></div>
                                    </div>
                                </div>
                            </div>
                            <div class="appointShowBox" v-if="product.isAppointNow">
                            <div class="qy-flex qy-flex-fullHeight qy-flex-text-between qy-border-bottom ">
                                <div class="qy-flex">体检人姓名</div>
                                <div class="qy-flex qy-text-right">
                                    <input type="text" class="qy-no-border qy-no-padding qy-no-margin mui-text-right" placeholder="请输入体检人真实姓名">
                                    <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                                </div>
                            </div>
                            <div class="qy-flex qy-flex-fullHeight qy-flex-text-between qy-border-bottom">
                                <div class="qy-flex">体检人性别</div>
                                <div class="qy-flex qy-text-right">
                                    <input type="text" class="qy-no-border qy-no-padding qy-no-margin mui-text-right" placeholder="男">
                                    <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                                </div>
                            </div>
                            <div class="qy-flex qy-flex-fullHeight qy-flex-text-between qy-border-bottom ">
                                <div class="qy-flex">体检人联系电话</div>
                                <div class="qy-flex qy-text-right">
                                    <input type="text" class="qy-no-border qy-no-padding qy-no-margin mui-text-right" placeholder="请输入有效联系电话">
                                    <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                                </div>
                            </div>
                            <div class="qy-flex qy-flex-fullHeight qy-flex-text-between qy-border-bottom ">
                                <div class="qy-flex">体检人年龄</div>
                                <div class="qy-flex qy-text-right">
                                    <input type="text" class="qy-no-border qy-no-padding qy-no-margin mui-text-right" placeholder="请输入体检人年龄">
                                    <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                                </div>
                            </div>
                            <div class="qy-flex qy-flex-fullHeight qy-flex-text-between qy-border-bottom">
                                <div class="qy-flex">体检人身份证号</div>
                                <div class="qy-flex qy-text-right">
                                    <input type="text" class="qy-no-border qy-no-padding qy-no-margin mui-text-right" placeholder="请输入体检人身份证号">
                                    <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                                </div>
                            </div>
                            <div class="qy-flex qy-flex-fullHeight qy-flex-text-between qy-border-bottom">
                                <div class="qy-flex">预约体检时间</div>
                                <div class="qy-flex qy-text-right">
                                    <input type="text" class="qy-no-border qy-no-padding qy-no-margin mui-text-right" placeholder="选择体检时间">
                                    <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                                </div>
                            </div>
                        </div>
                        </div>



                        <div class="qy-flex qy-flex-text-between qy-padding-horizontal-8px qy-flex-fullHeight">
                            <div>使用商场优惠券</div>
                            <div class="qy-flex">满500减100元 <span class="mui-icon mui-icon-arrowright qy-text-label"></span></div>
                        </div>
                    </div>





                    <%--底部总计和文字提示信息以及订单联系人--%>
                    <div class="qy-bg-white qy-margin-top-8px qy-padding-left-8px">
                        <div class="qy-flex qy-flex-fullHeight qy-flex-text-between">
                            <div class="qy-flex">订单联系人</div>
                            <div class="qy-flex qy-text-right">
                                <input type="text" class="qy-no-border qy-no-padding qy-no-margin mui-text-right" :value="orderMaster" placeholder="请输入订单联系人">
                                <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                            </div>
                        </div>
                        <div class="qy-flex qy-flex-fullHeight qy-flex-text-between">
                            <div class="qy-flex">联系人电话</div>
                            <div class="qy-flex qy-text-right">
                                <input type="text" class="qy-no-border qy-no-padding qy-no-margin mui-text-right" :value="orderMasterPhone" placeholder="请输入联系人电话">
                                <span class="mui-icon mui-icon-arrowright qy-text-label"></span>
                            </div>
                        </div>
                    </div>
                    <small class="qy-text-label mui-block qy-padding-left-8px qy-padding-horizontal-8px">
                        订单完成后,可在个人中心发票管理进行发票申请
                    </small>
                    <div class="qy-bg-white qy-padding-left-8px qy-margin-bottom-8px">
                        <div class="qy-flex qy-flex-fullHeight qy-padding-horizontal-4px qy-flex-text-between">
                            <div class="qy-flex">商品金额</div>
                            <div class="qy-flex qy-flex-text-right qy-padding-right-8px">
                               ¥ {{totalPrice}}
                            </div>
                        </div>
                        <div class="qy-flex qy-flex-fullHeight qy-padding-horizontal-4px qy-flex-text-between qy-border-bottom">
                            <div class="qy-flex">运费</div>
                            <div class="qy-flex qy-flex-text-right qy-padding-right-8px">
                               ¥ {{orderFreight}}
                            </div>
                        </div>
                        <div class="qy-flex qy-flex-fullHeight qy-padding-horizontal-4px qy-flex-text-between">
                            <div class="qy-flex">小计</div>
                            <div class="qy-text-right qy-padding-right-8px">
                                <span class="qy-text-red mui-block">¥ {{totalPrice}}</span>
                                <small class="qy-text-label">已优惠: ¥1500.00</small>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <!--页面主内容区结束-->
    </div>
    <!--单页面结束-->
    <div id="account" class="mui-page">
        <div class="mui-navbar-inner mui-bar mui-bar-nav">
            <span class="mui-left mui-action-back mui-pull-left mui-icon mui-icon-left-nav"></span>
            <h1 class="mui-title" style="position: absolute;margin: 0 !important;">收货地址</h1>
            <span class="mui-icon mui-pull-right qy-position-relative qy-flex qy-full-height shopcarEditHeaderBtn" style="font-size: 16px;">新增</span>
        </div>
        <div class="mui-page-content">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll qy-padding-top-4px">
                    <div class="qy-bg-white qy-padding-left-8px" style="position: relative;">
                        <div class="qy-swiper-control swiper-container" style="width: 100%;height: 100px;" v-for="address in addressList">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide qy-flex qy-flex-fullHeight swiperMainContent" v-on:click="selectAddress(address)">
                                    <div class="qy-flex-equalSpace qy-flex qy-flex-text-center">
                                        <img v-if="address.isSelect" src="http://www.qydjk.org/resource/front/app/mui/imgs/redCorrect.png" class="redCorrect"/>
                                    </div>
                                    <div class="qy-flex-bigSpace qy-flex qy-flex-direction-column qy-flex-fullWidth">
                                        <div class="qy-flex-equalSpace qy-flex qy-flex-text-bottom qy-text-red" v-if="address.isSelect">
                                            <span>{{address.name}}</span>
                                            <span class="qy-padding-vertical-8">{{address.phone}}</span>
                                            <span v-if="address.isDefault" class="qy-text-red qy-flex labelDefault qy-font-size-14px labelDefaultShow" style="line-height: 14px;">默认</span>
                                        </div>
                                        <div v-else class="qy-flex-equalSpace qy-flex qy-flex-text-bottom">
                                            <span>{{address.name}}</span>
                                            <span class="qy-padding-vertical-8">{{address.phone}}</span>
                                            <span v-if="address.isDefault" class="qy-text-red qy-flex labelDefault qy-font-size-14px labelDefaultShow" style="line-height: 14px;">默认</span>
                                        </div>
                                        <div class="qy-flex-equalSpace qy-flex">
                                            <small>{{address.address}}</small>
                                        </div>
                                    </div>
                                    <div class="qy-flex-equalSpace qy-flex qy-flex-fullHeight">
                                        <a href="" class="qy-flex qy-flex-text-center qy-flex-equalSpace"><img src="http://www.qydjk.org/resource/front/app/mui/imgs/greyEdit.png" class="redCorrect"/></a>
                                    </div>
                                </div>
                                <div :class="{'swiperEditBtn2':address.isDefault,'swiperEditBtn':!address.isDefault,'swiper-slide qy-flex qy-flex-fullHeight':true}">
                                    <div v-if="!address.isDefault" class="qy-flex-equalSpace qy-text-label qy-flex qy-bg-default qy-flex-text-center setToDefault" v-on:click="setDefault(address)">
                                        默认
                                    </div>
                                    <div class="qy-flex-equalSpace qy-text-white qy-flex qy-bg-red qy-flex-text-center deleteAddress" v-on:click="removeAddress(address)">
                                        删除
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>